<template>
  <div>
    <!-- <div style="margin-bottom: 20px"> -->
    <!-- <el-button size="small" @click="addTab(editableTabsValue)">
        add tab
      </el-button> -->
    <!-- </div> -->
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      :closable="editableTabs.length > 1"
      @tab-remove="removeTab"
      @tab-click="clickTab"
    >
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.id"
        :label="item.name"
        :name="index.toString()"
      >
        <!-- {{item.content}} -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // editableTabsValue: 1,
      editableTabs: [],
      tabIndex: 2,
    };
  },
  created() {
    this.editableTabs = this.$store.state.tabList;
    // this.editableTabsValue = this.$slots.state.tabIndex;
    console.log(this.editableTabsValue);
  },
  computed: {
    editableTabsValue: {
      get() {
        return this.$store.state.tabIndex.toString();
      },
      set(val) {
        this.$store.commit("setTabIndex", val);
      },
    },
  },
  watch: {},

  methods: {
    // addTab(targetName) {
    //   let newTabName = ++this.tabIndex + "";
    //   this.editableTabs.push({
    //     title: "New Tab",
    //     name: newTabName,
    //     content: "New Tab content",
    //   });
    //   this.editableTabsValue = newTabName;
    // },
    clickTab(item) {
      console.log(item);
      const id = this.editableTabs[item.index].id;
      if (typeof id == "string") {
        console.log("if");
        this.$router.push({
          name: "AdminStudentSearch",
          params: { sid: id },
        });
      } else {
        console.log("else");
        this.$router.push(this.editableTabs[item.index].path);
      }
    },
    removeTab(index) {
      // console.log(index);
      this.$store.commit("delTab", index);
    },
  },
};
</script>

<style lang="less" scoped>
.el-tabs__content {
  display: none;
}
</style>